<template>
    <div v-if="dataItem" class="new">
        <div class="user">
            <img :src="dataItem.avatar" alt="" />
            <div class="info">
                {{ dataItem.nickname }}
                <div class="time">{{ getTime(dataItem.add_time * 1000).slice(0, -3) }}</div>
            </div>
            <template v-if="userInfo && userInfo.id != dataItem.uid">
                <el-button
                    v-if="dataItem.is_follow == 0"
                    type="primary"
                    plain
                    size="small"
                    @click="setFollow()"
                    >关注</el-button
                >
                <el-button
                    v-if="dataItem.is_follow == 1"
                    type="primary"
                    size="small"
                    @click="setFollow2()"
                    >已关注</el-button
                >
            </template>
        </div>
        <div v-html="dataItem.title" class="text"></div>
        <div v-if="dataItem.pic" class="imgs">
            <el-image
                v-for="(url, index) in dataItem.pic.split(',')"
                :key="index"
                :src="url"
                class="img"
                :preview-src-list="[url]"
                fit="cover"
                lazy
            ></el-image>
        </div>
        <div class="caozuo">
            <div class="zan" @click="setTopicLike">
                <img
                    v-show="dataItem.is_like == 0"
                    src="~/assets/images/happyPost/zan.png"
                    alt=""
                />
                <img
                    v-show="dataItem.is_like == 1"
                    src="~/assets/images/happyPost/zan-s.png"
                    alt=""
                />
                {{ dataItem.give_like > 0 ? dataItem.give_like : "点赞" }}
            </div>
            <div class="zan" @click="clickComment">
                <img src="~/assets/images/happyPost/pl.png" alt="" />
                {{
                    dataItem.comment_count > 0 ? dataItem.comment_count : "评论"
                }}
            </div>
        </div>
        <div v-show="commentShow" class="comment">
            <div v-if="userInfo" class="comment-input">
                <img :src="userInfo.avatar" alt="" />
                <el-input
                    v-model="commentInput"
                    placeholder="说说您的感受"
                    class="input"
                ></el-input>
                <div class="fabu" @click="addYizhanCommentSubmit">发布</div>
            </div>
            <div v-show="commentList.length > 0" class="qtpl">其他评论</div>
            <div class="comment-list">
                <div v-for="c in commentList" :key="c.id" class="comment-item">
                    <div class="comment-1">
                        <img :src="c.avatar" alt="" />
                        <div class="name">
                            {{ c.nickname }}：
                            <!-- <div>{{ c.add_time_text.slice(0, -9) }}</div> -->
                            <div>{{ c.add_time_diff }}</div>
                        </div>
                        <div class="comment-text">
                            {{ c.content }}
                        </div>
                    </div>
                    <div class="caozuo2">
                        <div class="zan" @click="new_setLikecomment(c)">
                            <img
                                v-show="c.is_like == 0"
                                src="~/assets/images/happyPost/zan.png"
                                alt=""
                            />
                            <img
                                v-show="c.is_like == 1"
                                src="~/assets/images/happyPost/zan-s.png"
                                alt=""
                            />
                            {{ c.like_count ? c.like_count : "点赞" }}
                        </div>
                        <div class="zan" @click="c.showInput = !c.showInput">
                            <img
                                src="~/assets/images/happyPost/pl.png"
                                alt=""
                            />
                            {{
                                c.commenttocomments.length > 0
                                    ? c.commenttocomments.length
                                    : "评论"
                            }}
                        </div>
                    </div>
                    <div v-show="c.showInput" class="comment-inupt">
                        <el-input
                            v-model="c.commentInput"
                            placeholder="说说您的感受"
                            class="input"
                        ></el-input>
                        <div
                            class="fabu"
                            @click="
                                addYizhanCommentSubmit2(
                                    c.id,
                                    c.commentInput,
                                    c.sort_id
                                )
                            "
                        >
                            发布
                        </div>
                    </div>
                    <div
                        v-if="c.commenttocomments.length > 0"
                        class="comment-comment-list"
                    >
                        <div v-for="cc in c.commenttocomments" :key="cc.id">
                            <div class="comment-comment-item">
                                <div class="name">
                                    {{ cc.nickname
                                    }}<template
                                        v-if="
                                            cc.touser_nickname &&
                                            cc.touser_nickname != cc.nickname
                                        "
                                        ><span>回复</span
                                        >{{ cc.touser_nickname }}</template
                                    >：
                                    <div>{{ cc.add_time_diff }}</div>
                                </div>
                                <div class="comment-text">
                                    {{ cc.content }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="look-more">
                <div></div>
                查看xxx条 >
                <div></div>
            </div> -->
        </div>
    </div>
</template>

<script>
import { getTime } from "@/assets/utils/utils.js";

import {
    setTopicLike,
    addYizhanCommentSubmit,
    getTopicDetail,
    new_setLikecomment,
    setFollow,
} from "@/assets/api/happlypostApi.js";

import { mapState } from "vuex";

export default {
    name: "pageindex",
    props: {
        dataItem: {
            type: Object || null,
            default: function () {
                return null;
            },
        },
    },
    data() {
        return {
            commentInput: "",
            getTime: getTime,

            commentList: [],
            commentShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.commentList = [];
    },
    methods: {
        async setTopicLike() {
            const res = await setTopicLike({
                topic_id: this.dataItem.id,
            });
            if (res.code == 1) {
                if (this.dataItem.is_like == 0) {
                    // this.$message({
                    //     message: "点赞成功",
                    //     type: "success",
                    // });
                }
                this.$emit("changeLike", this.dataItem);
            }
        },

        async addYizhanCommentSubmit() {
            if (!this.commentInput) {
                return;
            }
            const res = await addYizhanCommentSubmit({
                topic_id: this.dataItem.id,
                content: this.commentInput,
            });
            if (res.code == 1) {
                this.commentInput = "";
                this.clickComment(false);
            }
        },

        async addYizhanCommentSubmit2(c_id, text, sort_id) {
            if (!text) {
                return;
            }
            const res = await addYizhanCommentSubmit({
                topic_id: this.dataItem.id,
                content: text,
                c_id: c_id,
                sort_id: sort_id,
            });
            if (res.code == 1) {
                text = "";
                this.clickComment(false);
            }
        },

        async new_setLikecomment(c) {
            const res = await new_setLikecomment({
                commentid: c.id,
                source: 5,
            });
            if (res.code == 1) {
                this.clickComment(false);
            }
        },

        async clickComment(is = true) {
            if (this.commentShow && is) {
                this.commentShow = false;
                return;
            }
            const res = await getTopicDetail({
                topic_id: this.dataItem.id,
            });
            if (res.code == 1) {
                this.commentList = res.data.comment.map((item) => {
                    item.showInput = false;
                    item.commentInput = "";
                    return item;
                });
                this.commentShow = true;
                this.dataItem.comment_count = res.data.comment_count;
            }
        },

        async setFollow() {
            const res = await setFollow({
                uid: this.dataItem.uid,
            });
            if (res.code == 1) {
                this.$emit("setFollow", this.dataItem);
            }
        },

        setFollow2() {
            let that = this;
            this.$confirm("确定不再关注此人？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    that.setFollow();
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.new {
    background: #ffffff;
    width: 100%;
    padding: 20px 28px 20px 28px;
    margin-bottom: 20px;
    .user {
        display: flex;
        align-items: center;
        img {
            width: 55px;
            height: 55px;
            min-width: 55px;
            border-radius: 55px;
            object-fit: cover;
        }
        .info {
            width: 100%;
            padding-left: 10px;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            .time {
                padding-top: 8px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
            }
        }
    }

    .text {
        padding-left: 64px;
        padding-top: 8px;
        font-weight: 350;
        font-size: 18px;
        color: #333333;
        line-height: 34px;
        white-space: pre-line;
        &::v-deep img{
            width: auto;
            height: 44px;
        }
    }

    .imgs {
        padding-left: 64px;
        display: flex;
        padding-top: 16px;
        .img {
            width: 215px;
            height: 209px;
            margin-right: 25px;
            object-fit: cover;
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .caozuo {
        padding-left: 64px;
        display: flex;
        align-items: center;
        padding-top: 20px;
        .zan {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            margin-right: 35px;
            img {
                width: 20px;
                height: 20px;
                margin-right: 7px;
            }
        }
    }
}

.comment {
    padding-left: 64px;

    .qtpl {
        font-weight: 400;
        font-size: 16px;
        color: #065cc7;
        margin-bottom: 8px;
        padding-top: 21px;
    }
}

.comment-input {
    display: flex;
    align-items: center;
    margin-top: 27px;
    margin-bottom: 44px;
    position: relative;
    img {
        width: 50px;
        min-width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50px;
    }
    .input {
        margin-left: 33px;
    }
    .fabu {
        width: 77px;
        height: 28px;
        background: #026beb;
        border-radius: 3px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        bottom: -44px;
        right: 0;
        &:active {
            opacity: 0.8;
        }
        &:hover {
            opacity: 0.9;
        }
    }
}

.comment-list {
}
.comment-item {
    .comment-1 {
        padding-top: 20px;
        display: flex;
        img {
            width: 50px;
            min-width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 50px;
        }
        .name {
            padding-left: 10px;
            white-space: nowrap;
            font-weight: 400;
            font-size: 16px;
            color: #ff9625;
            padding-top: 3px;
            div {
                padding-top: 6px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
            }
        }
        .comment-text {
            white-space: normal;
            overflow-wrap: break-word;
            font-weight: 350;
            font-size: 16px;
            color: #333333;
            line-height: 30px;
            padding-left: 15px;
            width: 100%;
        }
    }
    .caozuo2 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 5px;
        .zan {
            cursor: pointer;
            display: flex;
            align-items: center;
            // justify-content: flex-end;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            margin-left: 35px;
            img {
                width: 20px;
                height: 20px;
                margin-right: 7px;
            }
        }
    }

    .comment-inupt {
        padding-top: 9px;
        .input {
        }
        .fabu {
            margin-left: calc(100% - 77px);
            margin-top: 11px;
            width: 77px;
            height: 28px;
            background: #026beb;
            border-radius: 3px;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            &:active {
                opacity: 0.8;
            }
            &:hover {
                opacity: 0.9;
            }
        }
    }

    .comment-comment-list {
        margin-left: 59px;
        padding-left: 20px;
        border-left: 1px solid #d8d8d8;
        padding-top: 20px;
    }

    .comment-comment-item {
        margin-bottom: 15px;
        display: flex;
        &:last-child {
            // margin-bottom: 0;
        }
        .name {
            white-space: nowrap;
            font-weight: 400;
            font-size: 16px;
            color: #ff9625;
            padding-top: 3px;
            span {
                color: #333333;
            }
            div {
                padding-top: 6px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
            }
        }
        .comment-text {
            white-space: normal;
            overflow-wrap: break-word;
            font-weight: 350;
            font-size: 16px;
            color: #333333;
            line-height: 30px;
            padding-left: 15px;
            width: 100%;
        }
    }
}

.look-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 350;
    font-size: 16px;
    color: #666666;
    margin-top: 36px;
    div {
        width: 191px;
        height: 1px;
        background-color: #d8d8d8;
        margin: 0 18px;
    }
}
</style>
